<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bookShelf</title>
    <link rel="stylesheet" href="@../media/common.css">
    <script src="@../../lib/jquery-3.3.1.min.js"></script>
    <script src="@../utils/WebviewMessageHelper.js"></script>
    <style>
            #books {
                padding: 0;
                margin: 15px 0 0 0;
            }
            #books li {
                cursor: pointer;
                padding: 3px 10px;
                list-style:none;
            }
            #books li.active {
                color: #3794ff !important;
            }
            #books li:hover {
                background: rgba(0, 0, 0, .5);
            }
            #books li[isdirectory=true] {
                color: aqua;
            }
        </style>
</head>
<body>
    <div>
        <ul id="books">

        </ul>
        <div class="hover-show">
            <div class="hover-show-target">
                <input type="number" name="fontSize" value="{{ fontSize }}">
                <input type="color" name="fontColor" value="{{ fontColor }}">
                <button id="save">save</button>
            </div>
        </div>
    </div>
<script>
(function() {
    const vscode = acquireVsCodeApi();
    const webviewMessageHelper = new WebviewMessageHelper(vscode);

    const $books = $("#books");

    function getBooks() {
        webviewMessageHelper.emit({ command: 'getBook' }, (res) => {
            const books = res.data;
            if (books) {
                const items = books.map((item) => {
                    return `<li>${item}</li>`;
                });
                $books.html(items.join(''));
            }
        });
    }

    $books.on('click', 'li', function() {
        const book = $(this).text();
        webviewMessageHelper.emit({ command: 'reader', book });
    });

    $('#save').click(function() {
        var config = {
            fontColor: $('[name=fontColor]').val(),
            fontSize: $('[name=fontSize]').val(),
        };
        webviewMessageHelper.emit({ command: 'config', config });
    });

    getBooks();
}());
</script>
</body>
</html>